<template>
  <view class="w-[750rpx] bg-gray-50 min-h-screen pgs">
    <!-- Header -->
    <PageHeader title="发布签到任务" />

    <!-- Content -->
    <view class="p-[40rpx]">
      <nut-form ref="formRef" :model-value="formData">
        <!-- 任务标题 -->
        <view class="mb-[40rpx] bg-white rounded-[16rpx] p-[30rpx] shadow-sm">
          <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">
            任务标题 <text class="text-red-500">*</text>
          </view>
          <nut-input v-model="formData.title" placeholder="例如：每日健康打卡" class="w-full" />
        </view>

        <!-- 任务描述 -->
        <view class="mb-[40rpx] bg-white rounded-[16rpx] p-[30rpx] shadow-sm">
          <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">任务描述</view>
          <nut-textarea v-model="formData.description" placeholder="描述签到任务的具体内容和要求..." rows="4" />
          <view class="text-[26rpx] text-gray-500 mt-[10rpx]">建议详细说明签到规则和要求</view>
        </view>

        <!-- 时间设置 -->
        <view class="bg-white rounded-[16rpx] p-[30rpx] shadow-sm mb-[40rpx]">
          <view
            class="text-[36rpx] font-semibold mb-[30rpx] pb-[16rpx] border-b border-gray-200 text-blue-500 flex items-center">
            <!-- <IconFont name="time" size="16" class="mr-[10rpx]"></IconFont> -->
            时间设置
          </view>

          <!-- 开始和结束日期 -->
          <view class="flex gap-[30rpx] mb-[40rpx]">
            <view class="flex-1">
              <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">
                开始日期 <text class="text-red-500">*</text>
              </view>
              <view @click="showStartDatePicker = true"
                class="p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer">
                <text :class="formData.startDate ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.startDate || '请选择开始日期' }}
                </text>
              </view>
            </view>
            <view class="flex-1">
              <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">结束日期</view>
              <view @click="showEndDatePicker = true"
                class="p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer">
                <text :class="formData.endDate ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.endDate || '请选择结束日期' }}
                </text>
              </view>
              <view class="text-[26rpx] text-gray-500 mt-[10rpx]">留空表示长期有效</view>
            </view>
          </view>

          <!-- 每日签到时间段 -->
          <view class="mb-[40rpx]">
            <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">
              每日签到时间段 <text class="text-red-500">*</text>
            </view>
            <view class="flex gap-[30rpx]">
              <view @click="showStartTimePicker = true"
                class="flex-1 p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer text-center">
                <text :class="formData.startTime ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.startTime || '开始时间' }}
                </text>
              </view>
              <view class="flex items-center justify-center text-gray-400 text-[24rpx]">至</view>
              <view @click="showEndTimePicker = true"
                class="flex-1 p-[28rpx] border border-gray-300 rounded-[16rpx] text-[30rpx] bg-[#f0f0f0] active:bg-gray-50 transition-colors cursor-pointer text-center">
                <text :class="formData.endTime ? 'text-gray-800' : 'text-gray-400'">
                  {{ formData.endTime || '结束时间' }}
                </text>
              </view>
            </view>
            <view class="text-[26rpx] text-gray-500 mt-[10rpx]">设置每天允许签到的时间范围</view>
          </view>
        </view>

        <!-- 签到地址设置 -->
        <view class="bg-white rounded-[16rpx] p-[30rpx] shadow-sm mb-[40rpx]">
          <view
            class="text-[36rpx] font-semibold mb-[30rpx] pb-[16rpx] border-b border-gray-200 text-blue-500 flex items-center">
            <!-- <IconFont name="location" size="16" class="mr-[10rpx]"></IconFont> -->
            签到地址设置
          </view>

          <view class="mb-[40rpx]">
            <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">
              签到位置 <text class="text-red-500">*</text>
            </view>
            <nut-input v-model="formData.address.name" placeholder="输入或选择签到地点" class="w-full !my-[10rpx]" />
            <nut-button type="primary" size="small" @click="selectLocation" class="w-full flex-center !my-[10rpx]"
              style="display: flex;align-items: center;">

              <template #icon>
                <IconFont name="location" size="14" class="mr-[10rpx]"></IconFont>
              </template>
              <text>选择位置</text>
            </nut-button>

            <!-- 地址详情 -->
            <view v-if="formData.address.name"
              class="bg-white border border-gray-200 rounded-[16rpx] p-[30rpx] mt-[30rpx] shadow-sm">
              <view class="mb-[30rpx]">
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">详细地址</view>
                <nut-input v-model="formData.address.detail" placeholder="请输入详细地址" class="w-full" />
              </view>

              <view class="mb-[30rpx]">
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">位置坐标</view>
                <view class="flex gap-[30rpx]">
                  <nut-input v-model="formData.address.lat" placeholder="纬度" class="flex-1" />
                  <nut-input v-model="formData.address.lng" placeholder="经度" class="flex-1" />
                </view>
                <view class="text-[26rpx] text-gray-500 mt-[10rpx]">可手动输入或通过选择位置自动填入</view>
              </view>

              <view class="mb-[30rpx]">
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">位置预览</view>
                <view
                  class="h-[300rpx] bg-gradient-to-br from-blue-50 to-gray-100 rounded-[12rpx] flex items-center justify-center text-gray-500 border-2 border-dashed border-gray-300">
                  <view class="text-center">
                    <IconFont name="location" size="24" class="mb-[10rpx] text-blue-400"></IconFont>
                    <view class="text-[28rpx]">位置地图预览</view>
                    <view class="text-[24rpx] mt-[5rpx]">选择位置后显示地图</view>
                  </view>
                </view>
              </view>

              <view>
                <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">签到范围（米）</view>
                <nut-input v-model="formData.address.range" type="number" placeholder="100" class="w-full" />
                <view class="text-[26rpx] text-gray-500 mt-[10rpx]">设置允许签到的最大距离范围，建议50-500米</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务金额设置 -->
        <view class="bg-white rounded-[16rpx] p-[30rpx] shadow-sm mb-[40rpx]">
          <view
            class="text-[36rpx] font-semibold mb-[30rpx] pb-[16rpx] border-b border-gray-200 text-blue-500 flex items-center">
            <!-- <IconFont name="money" size="16" class="mr-[10rpx]"></IconFont> -->
            任务金额设置
          </view>

          <view class="mb-[40rpx]">
            <view class="text-[32rpx] font-semibold mb-[16rpx] text-gray-800">
              任务金额 <text class="text-red-500">*</text>
            </view>
            <view class="flex gap-[20rpx] items-center">
              <nut-input v-model="formData.amount" type="number" placeholder="请输入任务金额" class="flex-1" />
              <view
                class="w-[80rpx] p-[20rpx] border border-blue-200 rounded-[16rpx] text-[30rpx] text-center bg-blue-50 text-blue-600 font-semibold">
                元
              </view>
            </view>
            <view class="text-[26rpx] text-gray-500 mt-[10rpx]">设置完成此签到任务可获得的金额奖励</view>
          </view>
        </view>

        <!-- 提交按钮 -->
        <view class="mt-[60rpx] pb-[40rpx]">
          <nut-button type="primary" size="large" @click="submitForm"
            class="w-full h-[100rpx] text-[36rpx] font-semibold rounded-[20rpx] shadow-lg">
            发布签到任务
          </nut-button>
        </view>
      </nut-form>
    </view>

    <!-- 日期选择器 -->
    <nut-calendar v-model:visible="showStartDatePicker" v-model="startDateValue" title="选择开始日期"
      @choose="onStartDateConfirm" @close="showStartDatePicker = false" />

    <nut-calendar v-model:visible="showEndDatePicker" v-model="endDateValue" title="选择结束日期" @choose="onEndDateConfirm"
      @close="showEndDatePicker = false" />


    <!-- 时间选择器 -->
    <nut-popup v-model:visible="showStartTimePicker" position="bottom" round>
      <nut-picker v-model:visible="showStartTimePicker" v-model="startTimeValue" :columns="timeColumns" title="选择开始时间"
        @confirm="onStartTimeConfirm" />
    </nut-popup>

    <nut-popup v-model:visible="showEndTimePicker" position="bottom" round>
      <nut-picker v-model="endTimeValue" :columns="timeColumns" title="选择结束时间" @confirm="onEndTimeConfirm" />
    </nut-popup>


  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import PageHeader from '@/components/PageHeader.vue'

// 表单数据
const formData = reactive({
  title: '',
  description: '',
  startDate: '',
  endDate: '',
  startTime: '',
  endTime: '',
  address: {
    name: '',
    detail: '',
    lat: '',
    lng: '',
    range: '100'
  },
  amount: ''
})

// 选择器显示状态
const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)
const showStartTimePicker = ref(false)
const showEndTimePicker = ref(false)

// 选择器值
const startDateValue = ref<string>('')
const endDateValue = ref<string>('')
const startTimeValue = ref<string[]>(['09', '00'])
const endTimeValue = ref<string[]>(['18', '00'])

// 时间选择器列数据
const timeColumns = ref([
  // 小时列
  Array.from({ length: 24 }, (_, i) => ({
    text: String(i).padStart(2, '0'),
    value: String(i).padStart(2, '0')
  })),
  // 分钟列
  Array.from({ length: 60 }, (_, i) => ({
    text: String(i).padStart(2, '0'),
    value: String(i).padStart(2, '0')
  }))
])



// 返回上一页
const goBack = () => {
  Taro.navigateBack()
}

// 日期确认
const onStartDateConfirm = (date: string) => {
  console.log("date", date)
  formData.startDate = date[3]
  showStartDatePicker.value = false
}

const onEndDateConfirm = (date: string) => {
  console.log("date", date)
  formData.endDate = date[3]
  showEndDatePicker.value = false
}

// 时间确认
const onStartTimeConfirm = () => {
  formData.startTime = `${startTimeValue.value[0]}:${startTimeValue.value[1]}`
  showStartTimePicker.value = false
}

const onEndTimeConfirm = () => {
  formData.endTime = `${endTimeValue.value[0]}:${endTimeValue.value[1]}`
  showEndTimePicker.value = false
}



// 选择位置
const selectLocation = () => {
  // 模拟位置选择
  formData.address.name = '北京市朝阳区望京SOHO'
  formData.address.detail = '北京市朝阳区望京SOHO T3写字楼'
  formData.address.lat = '39.992894'
  formData.address.lng = '116.480972'

  Taro.showToast({
    title: '位置选择成功',
    icon: 'success'
  })
}

// 提交表单
const submitForm = () => {
  // 验证必填项
  if (!formData.title) {
    Taro.showToast({
      title: '请输入任务标题',
      icon: 'none'
    })
    return
  }

  if (!formData.startDate) {
    Taro.showToast({
      title: '请选择开始日期',
      icon: 'none'
    })
    return
  }

  if (!formData.startTime || !formData.endTime) {
    Taro.showToast({
      title: '请选择签到时间段',
      icon: 'none'
    })
    return
  }

  if (!formData.address.name) {
    Taro.showToast({
      title: '请选择签到位置',
      icon: 'none'
    })
    return
  }

  if (!formData.amount) {
    Taro.showToast({
      title: '请输入任务金额',
      icon: 'none'
    })
    return
  }

  console.log('提交数据:', formData)

  Taro.showToast({
    title: '签到任务发布成功！',
    icon: 'success'
  })

  // 实际项目中这里发送请求到后端
}
</script>

<style lang="scss">
.pgs {
  .nut-cell-group__wrap {
    background: none !important;
    box-shadow: none !important;
  }

  .nut-input {
    border-radius: 16rpx;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;

    &:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
  }

  .nut-textarea {
    border-radius: 16rpx;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;

    &:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
  }

  .nut-button--primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    transition: all 0.2s ease;

    &:active {
      transform: translateY(1px);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
  }

  .nut-button--small {
    border-radius: 12rpx;
    font-weight: 500;
  }
}
</style>